<template>
	<div class="quest-container">
		<!-- 顶部导航 -->
		<div class="header">
			<div class="back-btn" @click="goBack">
				<text>← 返回</text>
			</div>
			<text class="title">{{ currentChapter }}</text>
			<div class="map-btn" @click="openMap">
				<text>地图</text>
			</div>
		</div>

		<!-- 任务分类标签 -->
		<div class="quest-tabs">
			<div class="tab-item" 
				  :class="{ active: activeTab === 'current' }"
				  @click="switchTab('current')">
				<text>进行中</text>
				<div class="tab-badge" v-if="questList.current.length > 0">
					<text>{{ questList.current.length }}</text>
				</div>
			</div>
			<div class="tab-item" 
				  :class="{ active: activeTab === 'available' }"
				  @click="switchTab('available')">
				<text>可接取</text>
				<div class="tab-badge" v-if="questList.available.length > 0">
					<text>{{ questList.available.length }}</text>
				</div>
			</div>
			<div class="tab-item" 
				  :class="{ active: activeTab === 'completed' }"
				  @click="switchTab('completed')">
				<text>已完成</text>
				<div class="tab-badge" v-if="questList.completed.length > 0">
					<text>{{ questList.completed.length }}</text>
				</div>
			</div>
		</div>

		<!-- 任务列表 -->
		<div class="quest-list">
			<!-- 进行中任务 -->
			<div v-if="activeTab === 'current'">
				<div class="quest-card current" 
					  v-for="quest in questList.current" 
					  :key="quest.id"
					  @click="openQuestDetail(quest)">
					<div class="quest-header">
						<div class="quest-info">
							<text class="quest-name">{{ quest.name }}</text>
							<div class="quest-meta">
								<text class="quest-type">{{ quest.type }}</text>
								<text class="quest-level">Lv.{{ quest.level }}</text>
							</div>
						</div>
						<div class="quest-status">
							<text class="status-text">进行中</text>
						</div>
					</div>
					<text class="quest-desc">{{ quest.description }}</text>
					<div class="quest-progress">
						<div class="progress-bar">
							<div class="progress-fill" :style="{ width: (quest.progress * 100) + '%' }"></div>
						</div>
						<text class="progress-text">{{ quest.progress_text }}</text>
					</div>
					<div class="quest-rewards">
						<div class="reward-item">
							<text class="reward-icon">💰</text>
							<text class="reward-text">{{ quest.rewards.coins }}</text>
						</div>
						<div class="reward-item">
							<text class="reward-icon">⭐</text>
							<text class="reward-text">{{ quest.rewards.exp }}</text>
						</div>
						<div class="reward-item" v-for="item in quest.rewards.items" :key="item.id">
							<image class="reward-icon" :src="getItemIcon(item.icon)" mode="aspectFit"></image>
							<text class="reward-text">{{ item.name }}×{{ item.count }}</text>
						</div>
					</div>
				</div>
			</div>

			<!-- 可接取任务 -->
			<div v-if="activeTab === 'available'">
				<div class="quest-card available" 
					  v-for="quest in questList.available" 
					  :key="quest.id">
					<div class="quest-header">
						<div class="quest-info">
							<text class="quest-name">{{ quest.name }}</text>
							<div class="quest-meta">
								<text class="quest-type">{{ quest.type }}</text>
								<text class="quest-level">Lv.{{ quest.level }}</text>
							</div>
						</div>
						<div class="accept-btn" @click="acceptQuest(quest)">
							<text>接取</text>
						</div>
					</div>
					<text class="quest-desc">{{ quest.description }}</text>
					<div class="quest-rewards">
						<div class="reward-item">
							<text class="reward-icon">💰</text>
							<text class="reward-text">{{ quest.rewards.coins }}</text>
						</div>
						<div class="reward-item">
							<text class="reward-icon">⭐</text>
							<text class="reward-text">{{ quest.rewards.exp }}</text>
						</div>
						<div class="reward-item" v-if="quest.rewards.skill_point">
							<text class="reward-icon">📚</text>
							<text class="reward-text">武学点×{{ quest.rewards.skill_point }}</text>
						</div>
					</div>
				</div>
			</div>

			<!-- 已完成任务 -->
			<div v-if="activeTab === 'completed'">
				<div class="quest-card completed" 
					  v-for="quest in questList.completed" 
					  :key="quest.id"
					  @click="openQuestDetail(quest)">
					<div class="quest-header">
						<div class="quest-info">
							<text class="quest-name">{{ quest.name }}</text>
							<div class="quest-meta">
								<text class="quest-type">{{ quest.type }}</text>
								<text class="quest-level">Lv.{{ quest.level }}</text>
							</div>
						</div>
						<div class="completed-mark">
							<text>✓</text>
						</div>
					</div>
					<div class="completed-time">
						<text>完成时间：{{ quest.completed_at }}</text>
					</div>
				</div>
			</div>
		</div>

		<!-- 奖励弹窗 -->
		<div class="reward-modal" v-if="showRewardModal" @click="closeRewardModal">
			<div class="modal-content" @click.stop>
				<div class="modal-header">
					<text class="modal-title">任务完成</text>
				</div>
				<div class="reward-list">
					<div class="reward-item large">
						<text class="reward-icon">💰</text>
						<text class="reward-text">银两 +{{ currentRewards.coins }}</text>
					</div>
					<div class="reward-item large">
						<text class="reward-icon">⭐</text>
						<text class="reward-text">经验 +{{ currentRewards.exp }}</text>
					</div>
					<div class="reward-item large" v-for="item in currentRewards.items" :key="item.id">
						<image class="reward-icon" :src="getItemIcon(item.icon)" mode="aspectFit"></image>
						<text class="reward-text">{{ item.name }} +{{ item.count }}</text>
					</div>
				</div>
				<div class="modal-footer">
					<div class="confirm-btn" @click="closeRewardModal">
						<text>确定</text>
					</div>
				</div>
			</div>
		</div>
		
		<!-- 全局底部导航栏 -->
		<CustomTabBar />
	</div>
</template>

<script>
export default {
	data() {
		return {
			activeTab: 'current',
			currentChapter: '第二阶段：北丐南帝',
			questList: {
				current: [],
				available: [],
				completed: []
			},
			showRewardModal: false,
			currentRewards: {},
			loading: false
		}
	},
	onLoad() {
		this.loadQuestList()
	},
	methods: {
		// 加载任务列表
		async loadQuestList() {
			this.loading = true
			try {
				// 使用新的API调用方式
				const api = await import('@/api')
				const result = await api.questApi.getQuestList()
				
				this.questList = result.data
			} catch (error) {
				console.error('加载任务列表失败:', error)
				uni.showToast({
					title: error.message || '网络错误',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},

		// 切换标签
		switchTab(tab) {
			this.activeTab = tab
		},

		// 接取任务
		async acceptQuest(quest) {
			try {
				// 使用新的API调用方式
				const api = await import('@/api')
				const result = await api.questApi.acceptQuest(quest.id)
				
				// 从可接取列表移除
				const index = this.questList.available.findIndex(q => q.id === quest.id)
				if (index !== -1) {
					this.questList.available.splice(index, 1)
				}
				// 添加到进行中列表
				this.questList.current.push(result.data.task)
				uni.showToast({
					title: '任务接取成功',
					icon: 'success'
				})
				// 自动切换到进行中标签
				this.activeTab = 'current'
			} catch (error) {
				console.error('接取任务失败:', error)
				uni.showToast({
					title: error.message || '网络错误',
					icon: 'none'
				})
			}
		},

		// 打开任务详情
		openQuestDetail(quest) {
			uni.navigateTo({
				url: `/pages/quest/detail?id=${quest.id}&name=${quest.name}`
			})
		},

		// 打开地图
		openMap() {
			uni.navigateTo({
				url: '/pages/quest/map'
			})
		},

		// 显示奖励弹窗
		showRewardPopup(rewards) {
			this.currentRewards = rewards
			this.showRewardModal = true
		},

		// 关闭奖励弹窗
		closeRewardModal() {
			this.showRewardModal = false
			this.currentRewards = {}
		},

		// 返回上一页
		goBack() {
			uni.navigateBack()
		},

		// 获取物品图标
		getItemIcon(icon) {
			return `/static/items/${icon}`
		}
	}
}
</script>

<style scoped>
.quest-container {
	padding: 20rpx;
	background-color: #f5f5f5;
	min-height: 100vh;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
	padding: 20rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 10rpx;
	color: white;
}

.back-btn, .map-btn {
	font-size: 28rpx;
	padding: 10rpx 20rpx;
	border-radius: 8rpx;
	background-color: rgba(255,255,255,0.2);
}

.title {
	font-size: 36rpx;
	font-weight: bold;
}

.quest-tabs {
	display: flex;
	margin-bottom: 20rpx;
	background-color: white;
	border-radius: 15rpx;
	padding: 10rpx;
	box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
}

.tab-item {
	flex: 1;
	padding: 20rpx;
	text-align: center;
	border-radius: 10rpx;
	position: relative;
	transition: all 0.3s;
}

.tab-item.active {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
}

.tab-item text {
	font-size: 28rpx;
	font-weight: bold;
}

.tab-badge {
	position: absolute;
	top: 10rpx;
	right: 10rpx;
	width: 30rpx;
	height: 30rpx;
	background-color: #ff4d4f;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.tab-badge text {
	font-size: 20rpx;
	color: white;
	font-weight: bold;
}

.quest-list {
	height: calc(100vh - 300rpx);
	overflow-y: auto;
}

.quest-card {
	background-color: white;
	border-radius: 15rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.08);
	transition: transform 0.2s;
}

.quest-card:active {
	transform: scale(0.98);
}

.quest-card.current {
	border-left: 6rpx solid #1890ff;
}

.quest-card.available {
	border-left: 6rpx solid #52c41a;
}

.quest-card.completed {
	border-left: 6rpx solid #8c8c8c;
	opacity: 0.8;
}

.quest-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 15rpx;
}

.quest-info {
	flex: 1;
}

.quest-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 8rpx;
	display: block;
}

.quest-meta {
	display: flex;
	gap: 15rpx;
}

.quest-type {
	font-size: 22rpx;
	padding: 4rpx 12rpx;
	background-color: #f0f0f0;
	border-radius: 10rpx;
	color: #666;
}

.quest-level {
	font-size: 22rpx;
	padding: 4rpx 12rpx;
	background-color: #e6f7ff;
	border-radius: 10rpx;
	color: #1890ff;
}

.quest-status {
	padding: 8rpx 16rpx;
	background-color: #1890ff;
	border-radius: 20rpx;
}

.status-text {
	font-size: 22rpx;
	color: white;
	font-weight: bold;
}

.accept-btn {
	padding: 12rpx 24rpx;
	background-color: #52c41a;
	border-radius: 20rpx;
}

.accept-btn text {
	font-size: 24rpx;
	color: white;
	font-weight: bold;
}

.completed-mark {
	width: 60rpx;
	height: 60rpx;
	background-color: #52c41a;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.completed-mark text {
	font-size: 30rpx;
	color: white;
	font-weight: bold;
}

.quest-desc {
	font-size: 26rpx;
	color: #666;
	line-height: 1.5;
	margin-bottom: 15rpx;
}

.quest-progress {
	display: flex;
	align-items: center;
	margin-bottom: 15rpx;
	gap: 15rpx;
}

.progress-bar {
	flex: 1;
	height: 12rpx;
	background-color: #f0f0f0;
	border-radius: 6rpx;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #1890ff 0%, #52c41a 100%);
	border-radius: 6rpx;
	transition: width 0.3s;
}

.progress-text {
	font-size: 24rpx;
	color: #333;
	font-weight: bold;
}

.quest-rewards {
	display: flex;
	flex-wrap: wrap;
	gap: 15rpx;
}

.reward-item {
	display: flex;
	align-items: center;
	gap: 8rpx;
	padding: 8rpx 12rpx;
	background-color: #f8f9fa;
	border-radius: 8rpx;
}

.reward-icon {
	width: 32rpx;
	height: 32rpx;
	font-size: 24rpx;
}

.reward-text {
	font-size: 22rpx;
	color: #333;
	font-weight: bold;
}

.completed-time {
	font-size: 22rpx;
	color: #999;
	margin-top: 10rpx;
}

.reward-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.modal-content {
	width: 80%;
	background-color: white;
	border-radius: 20rpx;
	padding: 40rpx;
	box-shadow: 0 10rpx 30rpx rgba(0,0,0,0.3);
}

.modal-header {
	text-align: center;
	margin-bottom: 30rpx;
}

.modal-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.reward-list {
	margin-bottom: 30rpx;
}

.reward-item.large {
	justify-content: center;
	padding: 20rpx;
	margin-bottom: 15rpx;
	background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
	border-radius: 12rpx;
}

.reward-item.large .reward-icon {
	width: 40rpx;
	height: 40rpx;
	font-size: 32rpx;
}

.reward-item.large .reward-text {
	font-size: 28rpx;
}

.modal-footer {
	text-align: center;
}

.confirm-btn {
	padding: 20rpx 60rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 25rpx;
	display: inline-block;
}

.confirm-btn text {
	font-size: 28rpx;
	color: white;
	font-weight: bold;
}
</style>